import type { CascaderProps } from 'antd';
import { Cascader } from 'antd';
import { getOptions } from './utils';

const option = getOptions();

function displayRenderCreator(multiple = false) {
  if (multiple) {
    return (label: string[]) => {
      return label[label.length - 1];
    };
  } else {
    return (label: string[]) => {
      return label.join('-');
    };
  }
}

function CityPicker({ value, placeholder = '请选择地址', ...props }: CascaderProps) {
  return (
    <Cascader
      maxTagCount={2}
      maxTagTextLength={60}
      options={option}
      value={value}
      displayRender={displayRenderCreator(props.multiple)}
      placeholder={placeholder}
      {...props}
    />
  );
}

export { CityPicker };
